<template>
  <div>
    <nav class="navbar is-dark" role="navigation" aria-label="main navigation" style="padding-left: 15px; paddiing-right:15px">
      <div class="navbar-brand">
        <a class="navbar-item" href="https://bulma.io">
          <!-- <img src="https://bulma.io/images/bulma-logo-white.png" width="112" height="28"> -->
          <img src="../assets/logo-nav.png" width="60" height="28">
          <span class="logo-word">华易科技</span>
        </a>
        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
          <span aria-hidden="true"></span>
        </a>
      </div>
      <div id="navbarBasicExample" class="navbar-menu">
        <div class="navbar-start">
          <router-link to="/search" class="navbar-item" v-if="!userIsAdmin">
              小易采集
          </router-link>
          <router-link to="/customer/list" class="navbar-item" v-if="!userIsAdmin">
            小易客管
          </router-link>
          <router-link to="/customer/mail" class="navbar-item" v-if="!userIsAdmin">
            小易邮通
          </router-link>
          <a class="navbar-item" href="https://translate.google.cn/" target="blank" v-if="!userIsAdmin">
            在线翻译
          </a>
          <router-link to="/user" class="navbar-item" v-if="userIsAdmin">
            用户管理
          </router-link>
        </div>

        <div class="navbar-end">
          <div class="navbar-item">
            <div class="buttons">
              <router-link class="button is-info" to="/login">
                <strong>退出登录</strong>
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <div class="image-banner">
      <div class="banner-word">小易搜索 世界搜索信息库</div>
    </div>
    <div>
      <router-view/>
    </div>

  </div>
</template>

<script>
import ElAside from "element-ui/packages/aside/src/main";
import { getUserAuth } from "@/util/userInfoStorage"
export default {
  components: {ElAside},
  name: "main-layout",
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      userIsAdmin: false,
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    }
  },
  mounted(){
    if(getUserAuth() == 'admin'){
      this.userIsAdmin = true;
    }
  }
}
</script>

<style lang="less" scoped>
.logo-word {
  font-size: 26px;
  margin-left: 10px;
  font-weight: bold;
  text-shadow: 1px 1px 0px #fff;
}
.image-banner {
  // margin-top: 20px;
  width: 100%;
  height: 15vh;
  background-image: url('../assets/banner.jpeg');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  .banner-word {
    color: white;
    font-size:3rem;
    font-weight: bold;
    text-shadow:1px 1px 0px #005073;
  }
}
</style>
